<template>
	<div class="user_data_info">
		<h4>{{ data.username || data.account }}</h4>
		<p>
			<template v-for="(tag, idx) in userRoleNames">
				<el-tag size="small">{{ tag }}</el-tag>
			</template>
		</p>
		<p>{{ data.deptName }}</p>
	</div>
</template>

<script>
export default {
	props: {
		data: { type: Object, default: () => {} }
	},
	computed: {
		userRoleNames() {
			let roles = this.data.menuRoleList || [];
			return roles.map((n) => n.name);
		}
	}
};
</script>

<style lang="scss" scoped>
.user_data_info {
	flex: 1;
	margin-left: 20px;
	overflow: hidden;
	h4 {
		font-size: 18px;
		line-height: 1;
	}
	p {
		line-height: 1;
		margin-top: 12px;
	}
}
</style>
